import React, { Component } from 'react'
import { Card, Form, Icon, Input, Button, Checkbox } from 'antd'
const FormItem = Form.Item

class FLogin extends Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
        console.log(this.props.form.getFieldsValue())
    }
    handleSub = () => {
        console.log(this.props.form.getFieldsValue())
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="card-wrap">
                <Card title="水平登录栏">
                    <Form layout="inline">
                        <FormItem>
                            {
                                getFieldDecorator('userName', {
                                    rules: [{ required: true, message: '请填写用户名！' }]
                                })(
                                    <Input prefix={<Icon type="user" />} placeholder="用户名" />
                                    )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('password', {
                                    rules: [{ required: true, message: '请填写密码！' }]
                                })(
                                    <Input prefix={<Icon type="lock" />} type="password" placeholder="用户密码" />
                                    )
                            }
                        </FormItem>
                        <FormItem>
                            <Button type="primary" onClick={this.handleSubmit}>确认</Button>
                        </FormItem>
                    </Form>
                </Card>
                <Card title="登录栏">
                    <Form style={{ width: 300 }}>
                        <FormItem>
                            {
                                getFieldDecorator('userName', {
                                    rules: [{ required: true, message: '请填写用户名！' }]
                                })(
                                    <Input prefix={<Icon type="user" />} placeholder="用户名" />
                                    )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('password', {
                                    rules: [{ required: true, message: '请填写密码！' }]
                                })(
                                    <Input type="password" prefix={<Icon type="lock" />} placeholder="密码" />
                                    )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('remember', {
                                    valuePropName: 'checked',
                                    initialValue: true,
                                })(
                                    <Checkbox>记住密码</Checkbox>
                                    )
                            }
                            <a href="##" style={{float: 'right'}}>重置密码</a>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" onClick={this.handleSub}>提交</Button>
                        </FormItem>
                    </Form>
                </Card>
            </div>
        )
    }
}
export default Form.create()(FLogin)